<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>JavaScript30 在线示例</title>

		<style type="text/css">
			* {
				box-sizing: border-box;
			}

			body,
			ol {
				margin: 0;
			}

			a,
			a:hover {
				text-decoration: none;
				display: block;
				text-shadow: 3px 3px 10px black;
			}

			#app {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background: #018ded url(http://unsplash.it/1920/1080/?blur) center no-repeat;
				background-size: cover;
				min-height: 100vh;
				min-width: 500px;
			}

			#app h1 {
				color: lightcoral;
			}

			#app ol {
				border: 10px solid rgba(0, 0, 0, 0.05);
			}

			#app ol li {
				height: 30px;
			}

			#app ol li a {
				color: darkturquoise;
			}

			#app ol li a:hover {
				color: lightcoral;
			}
		</style>
	</head>

	<body id="app">
		<h1>JavaScript30 在线示例</h1>
		<ol>
			<li>
				<a href="Day01 - JavaScript Drum Kit">纯 JS 模拟敲鼓效果在线示例</a>
			</li>
			<li>
				<a href="Day02 - JavaScript + CSS Clock">纯 JavaScript+CSS 时钟在线示例</a>
			</li>
			<li>
				<a href="Day03 - CSS Variables">用 CSS 变量实现拖动控制参数在线效果</a>
			</li>
			<li>
				<a href="Day04 - Array Cardio 1">数组基本操作方法示例一</a>
			</li>
			<li>
				<a href="Day05 - Flex Panel Gallery">可伸缩的图片墙在线效果</a>
			</li>
			<li>
				<a href="Day06 - Type Ahead">根据关键词快速匹配诗句在线效果</a>
			</li>
			<li>
				<a href="Day07 - Array Cardio 2">数组基本操作方法示例二</a>
			</li>
			<li>
				<a href="Day08 - Fun with HTML5 Canvas">彩虹画笔绘画板在线效果</a>
			</li>
			<li>
				<a href="Day09 - Console Tricks">Console 调试技巧在线示例</a>
			</li>
			<li>
				<a href="Day10 - Hold Shift to Check Multiple Checkboxes">Shift 批量选中在线效果</a>
			</li>
			<li>
				<a href="Day11 - Custom Video Player">自定义视频播放器在线示例</a>
			</li>
			<li>
				<a href="Day12 - Key Sequence Detection">关键字匹配插入图片在线示例</a>
			</li>
			<li>
				<a href="Day13 - Slide in on Scroll">图片随屏幕滚动而滑入滑出的在线效果</a>
			</li>
			<li>
				<a href="Day14 - JavaScript References VS Copying">JS 引用和拷贝在线示例</a>
			</li>
			<li>
				<a href="Day15 - LocalStorage">Todo 本地存储在线示例</a>
			</li>
			<li>
				<a href="Day16 - Mouse Move Shadow">鼠标移动让文字出现🌈效果在线示例</a>
			</li>
			<li>
				<a href="Day17 - Sort Without Articles">数组排序在线示例</a>
			</li>
			<li>
				<a href="Day18 - Adding Up Times with Reduce">Reduce、Map混合使用计算时分秒在线示例</a>
			</li>
		</ol>
	</body>

</html>